<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
%>
<%@taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>创建H5相册素材</title>
    <link rel="shortcut icon" href="favicon.ico"> 
    <link rel="stylesheet" type="text/css" href="<%=path%>/css/marketing/public.css" />
    <link rel="stylesheet" type="text/css" href="<%=path%>/css/marketing/style_list.css" />
    <link href="<%=path%>/hplus/css/bootstrap.min14ed.css?v=3.3.6" rel="stylesheet">
    <link href="<%=path%>/hplus/css/font-awesome.min93e3.css?v=4.4.0" rel="stylesheet">
    <link href="<%=path%>/hplus/css/plugins/iCheck/custom.css" rel="stylesheet">
    <link href="<%=path%>/hplus/css/animate.min.css" rel="stylesheet">
    <link href="<%=path%>/hplus/css/style.min862f.css?v=4.1.0" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="<%=path%>/hplus/js/plugins/sweetalert/sweetalert2.min.css">
    <link href="<%=path%>/css/marketing/s_style.css" rel="stylesheet">
    <link href="<%=path%>/hplus/css/plugins/datapicker/datepicker3.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="<%=path%>/css/marketing/photoAlbum.css"/>
    <!--以下两行加载秀米的ueditor插件的脚本和CSS，请编辑您的UEditor网页加入他们-->
    <!--您也可以下载这两个文件并根据您的需要改动相关的内容，当然，改动后您必须将新文件存放到您的服务器上了-->
    <link rel="stylesheet" href="http://xiumi.us/connect/ue/v5/xiumi-ue-v5.css">
    <style> 
        .radio label{
            padding-left: 0;
        }
        .col-sm-1{
                width: 9.333333%;
        }
        .s_progress_bar{
                width: 260px;
        }
        .s_x_color_bz{
                width: 260px;
			    height: 30px;
			    line-height: 30px;
			    margin-top: 20px;
			    overflow: hidden;
			    padding: 0;
			    position: absolute;
			    color: #999;
			    z-index: 99;
        }
        .s_current .s_x_color_bz {
		    color: #18a689;
		}
		
		.tishi{
            margin-top: 7px;
            
        }

        .alert{
            position:absolute;
            top: -15px;
            left: 8%;
            display:none;
        }
        .s_btn-primary {
		    background-color: #1ab394;
		    border-color: #1ab394;
		    color: #FFF;
		    float: left;
		    margin-right: 5px;
		    border-radius: 3px;
		}
		.col-sm-1 {
		    width: 10.333333%;
		}
    </style>
</head>

<body class="gray-bg">
    <div class="wrapper wrapper-content">
        <div class="container-fluid">
		     <div class="row">
		        <!-- 步骤条 start -->
		        <div class="col-md-12"><h3><strong>创建H5相册素材</strong></h3></div>
		        
		        <!-- 步骤条 end -->
		        
		        <div class="ibox-content">
			        
                    <form id="uploadMusic" class="form-horizontal">
                        <div class="form-group">
                           <label class="col-sm-1 control-label"></label>
		                   <div class="col-sm-11 x_progress " style="width:900px;">
				             <div class="s_line">
				                <div class="s_progress_bar s_current" role="progressbar"
									 aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">
									<span class="sr-only_1">1</span>
									<p class="s_x_color_bz">H5素材设置</p >
								</div>
								<div class="s_progress_bar" role="progressbar"
									 aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">
									<span class="sr-only_2">2</span>
									<p class="s_x_color_bz">H5素材收集信息设置</p >
								</div>
								<div class="s_progress_bar" role="progressbar"
									 aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">
									<span class="sr-only_3">3</span>
									<p class="s_x_color_bz">H5素材分享设置</p >
								</div>
				             </div>
				          </div>
				        </div>  
                    
	                    <div class="form-group">
		                    <label class="col-sm-1 control-label"><span style="color:red"> * </span>相册名称:</label>
		                    <div class="col-sm-3">
		                        <input id="name" type="text" class="form-control"  maxlength="32" onblur="checkLength(this)"/>
		                    </div>
                        </div>
                        <div class="form-group">
		                    <label class="col-sm-1 control-label"><span style="color:red"> * </span>相册内容:</label>
		                    <div class="col-md-8 ">
		                            <div id="photoPage">
		                               <button type="button" class="btn s_btn-primary pageInfoBtn" pageIndex="1">第一页</button>
		                            </div>    
									<div style="float: left;">
									   <button id="addPage" type="button" class="btn btn-outline s_btn-primary" style="background-color: #ffffff;color:#1ab394">+</button>
									   <button type="button" class="btn s_btn-primary">尾页</button>
									</div>
									<h6 class="col-md-3 pull-right">相册最多设置9页，建议每页550*300px</h6>
							</div>
                        </div>
                        <div class="form-group">
		                    <label class="col-sm-1 control-label"></label>
		                    <div class="col-md-8 k_activity" style="z-index:0;">
									<div id="editor"></div>
							</div>
                        </div>
                        <div class="form-group">
		                    <label class="col-sm-1 control-label">背景音乐:</label>
		                    <div class="col-md-1" style="width: 10%;">
									<button type="button" class="btn btn-primary">上传音乐</button>
									<input class="col-md-2 sharePic" accept="audio/mpeg"
														type="file" id="musicFile"
														onchange="uploadMusic()" name="musicFile"
														style="filter: alpha(opacity = 50); -moz-opacity: 0.5; -khtml-opacity: 0.5; opacity: 0.0; position: absolute; z-index: 99;margin-top: -30px;">
							</div>
							<div class="col-sm-2" style="margin-left:-25px;margin-top:2px">
		                        <h6>音乐大小3M以内，仅支持mp3格式</h6>
		                    </div>
                        </div>
                        
                        <div class="form-group">
		                    <label class="col-sm-1 control-label"></label>
		                    <div class="col-md-6" style="border: 1px #ccc solid; font-size: 16px;margin-left: 15px;">
                                <div style="background: #F3F7FA; height: 60px; line-height: 60px; padding-left: 20px;">
                                                                                                    我的音乐列表
                                </div>
                                <ul class="musicList">
                                </ul>
                                <div style="padding-left: 20px; background: #FAFAFA">
                                    <audio id="mp3" src="" controls="controls"></audio>
                                </div>
                            </div>
                        </div>
                        
                        <div class="form-group">
		                   <label class="col-sm-1 control-label"><span style="color:red"> * </span>H5有效期:</label>
		                   <div class="col-sm-10">
		                        <div class="radio i-checks col-sm-1">
		                            <label class="operation">
		                                <input id="noValidity" type="radio" checked=""  name="validity" value="0"> <i></i>不限</label>
		                        </div>
		                        <div class="col-sm-8">
		                           <div class="radio i-checks  col-sm-1">
		                             <label class="operation">
		                                <input type="radio" id="haveValidity" name="validity" value="1"></label>
		                           </div>
		                           <div class="form-group col-sm-8" id="choseExpireTime" style="margin-left:-30px;margin-top:2px;">
					                    <div class="input-daterange input-group" id="datepicker" style="padding-left:15px">
					                        <input id="startTime" type="text" class="input-sm form-control" name="start" value="2018-1-3" onchange="startTimeChange()"/>
					                        <span class="input-group-addon">至</span>
					                        <input id="endTime" type="text" class="input-sm form-control" name="end" value="2018-2-3" onchange="endTimeChange()"/>
					                    </div>
					                </div>  
		                        </div>
		                    </div>
		                </div>
		                
		                <div class="form-group">
		                    <label class="col-sm-1 control-label">H5支持门店:</label>
		                    <div class="col-sm-3">
		                        <button type="button" class="btn btn-primary" data-toggle="modal" href="<%=path%>/view/ui/store" data-target="#storeModal">选择门店</button>
		                    </div>
                        </div>
                        <!-- 选择的门店 -->
		                <div class="form-group">
		                    <label class="col-sm-1 control-label"></label>
		                    <div id="storeList" class="col-sm-8">
		                    </div>
                        </div>
		                <div class="form-group">
		                    <label class="col-sm-1 control-label">H5显示门店数:</label>
		                    <div class="col-sm-3">
		                        <input id="showStoreCount" type="text" class="form-control" value="1" onkeyup="if(this.value.substr(0, 1)=='0'){this.value='';}else{this.value=this.value.replace(/\D/g,'')}" onafterpaste="if(this.value.substr(0, 1)=='0'){this.value='';}else{this.value=this.value.replace(/\D/g,'')}" maxlength="2"/>
		                    </div>
                        </div>
		                
		                <div class="form-group">
		                   <label class="col-sm-1 control-label">微信页面授权:</label>
		                   <div class="col-sm-10">
		                        <div class="radio i-checks col-sm-2" style="width:10%">
		                            <label class="operation">
		                                <input id="explicitAuth" type="radio" checked=""  name="authType" value="1"> <i></i>显示授权</label>
		                        </div>
		                        <div class="col-sm-2" style="width:13%">
		                           <div class="radio i-checks  col-sm-12">
		                             <label class="operation">
		                                <input type="radio" id="implicitAuth"  name="authType" value="0"> 隐式授权</label>
		                           </div>
		                        </div>
		                        <div class="tishi col-sm-6" style="position:relative;margin-left:-15px">
			                        <img src="<%=path%>/images/marketing/help.png" />
			                        <div class="col-sm-10 alert alert-success">
			                            	<p>显示授权：需要用户在微信授权页面确认才能进入， 可获取所有用户的昵称、性别、所在地、头像、特权信息。</p>
                                            <p>隐式授权：无需用户确认直接进入页面，但未关注公众号的用户只能获取器openID，无法获取其它信息。</p>
                                            <p> 详请查看https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421140842&token=&lang=zh_CN</p>
			                        </div>
			                    </div>   
		                    </div>
		                </div>
		                
		                <div class="form-group">
		                   <label class="col-sm-1 control-label">是否允许分享:</label>
		                   <div class="col-sm-10">
		                        <div class="radio i-checks col-sm-1" style="width: 10%">
		                            <label class="operation">
		                                <input id="alowShare" type="radio" checked=""  name="alowShare" value="1"> <i></i>允许</label>
		                        </div>
		                        <div class="col-sm-1" style="width: 12.333333%">
		                           <div class="radio i-checks  col-sm-12">
		                             <label class="operation">
		                                <input type="radio" id="notAlowShare" name="alowShare" value="0"> 不允许</label>
		                           </div>
		                        </div>
		                        <div class="col-sm-4" style="margin-left:-25px;margin-top:2px">
		                           <h6>不允许分享，会屏蔽微信右上角更多按钮，请谨慎使用</h6>
		                        </div>
		                    </div>
		                </div>
		                <!-- 标签暂时不做 -->
		                <!-- <div class="form-group">
		                    <label class="col-sm-1 control-label">用户标签:</label>
		                    <div class="col-sm-1">
		                        <button type="button" class="btn btn-primary">选择标签</button>
		                    </div>
		                    <div class="col-sm-2" style="margin-left:-25px;margin-top:2px">
		                        <h6>用户访问页面后，会被打上标签</h6>
		                    </div>
		                    
                        </div> -->
                    </form>
                    
                    <div class ="text-center">
                        <button id="preview" class="btn btn-outline btn-primary" style="margin-right:15px" onclick="javascript:previewMaterial();">预览</button>
                        <button class="btn btn-outline btn-primary" style="margin-right:15px" onclick="javascript:save();">保存</button>
                        <button class="btn btn-primary" id="next">下一步</button>
                    </div>
                    
                </div>    
		     </div>
		</div>     
    </div>
    
    <div class="modal inmodal fade" id="storeModal" tabindex="-1" role="dialog"  aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
               
            </div>
        </div>
    </div>
    <!-- 预览 -->
   <div hidden="" class="modal inmodal fade" id="shareModal" tabindex="-1" role="dialog"  aria-hidden="true">
	    <div class="modal-dialog modal-sm">
	        <div class="modal-content">
	            <div class="modal-header">
	                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
	                <h4 class="modal-title">预览</h4>
	            </div>
	            <div class="modal-body text-center">
	               <div id="qrcode"></div>
	            </div>
	        </div>
	    </div>
	</div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/gh/bootcdn/BootCDN/ajax/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="<%=path%>/hplus/js/plugins/iCheck/icheck.min.js"></script>
    <script type="text/javascript" src="<%=path%>/hplus/js/plugins/dataTables/jquery.dataTables.min.js"></script>
    <script src="<%=path%>/hplus/js/plugins/sweetalert/sweetalert2.min.js"></script>
    <script type="text/javascript" src="<%=path%>/js/marketing/dialog.js"></script>
	<script type="text/javascript" src="<%=path%>/js/marketing/public.js"></script>
	<script type="text/javascript" src="<%=path%>/js/marketing/lengthlimit.js"></script>
	<script type="text/javascript" src="http://tajs.qq.com/stats?sId=9051096" charset="UTF-8"></script>
	<%-- <script type="text/javascript"  src="<%=path%>/js/marketing/ckeditor/ckeditor.js"></script> --%>
	<!-- 配置文件 -->
    <script type="text/javascript" src="<%=path%>/js/material/ueditor/ueditor.config.js"></script>
    <!-- 编辑器源码文件 -->
    <script type="text/javascript" src="<%=path%>/js/material/ueditor/ueditor.all.js"></script>  

    <script src="<%=path%>/hplus/js/plugins/datapicker/bootstrap-datepicker.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.form/4.2.2/jquery.form.min.js"></script>
    <script src="<%=path%>/js/dateUtils.js"></script>
    <script src="<%=path%>/js/dateUtils.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.qrcode/1.0/jquery.qrcode.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/artDialog/7.0.0/dialog-plus.js"></script>
    <script type="text/javascript" charset="utf-8" src="<%=path%>/js/material/ueditor/xiumi-ue-dialog-v5.js"></script>
   
	<script type="text/javascript">
	
	    var startIndex=0;
	    var pageSize=10;
	    var musicId=0;
	    var contentArray=new Array();
	    var store_names=new Array();
	    var store_ids=new Array();
	    var pageIndex=1;//页数下标
	    var name="";//名称
	    var id=0;
	    var startTime="";//开始有效期
	    var endTime="";//结束有效期
	    var storeIds="";//门店id
	    var showStoreCount=1;//显示的门店数量
	    var wxAuthType=1;//微信授权类型
	    var isAlowShare=1;//是否允许分享
	    var backMusic=0;//北背景音乐
	    
	    var handleType="";// 进入页面的操作类型 create:创建  edit:编辑   copy:复制
	    var validityType = 0;
	    var isCreate=false; //创建标记
	    var isNext = false; //标记是否点击下一步
	    var copyId=0;
	    var switchIndex = 1;//相册页切换下标
	    var previewId = new Date().getTime();
	    var status = 0; // 素材状态
	    //初始化富文本编辑器
		/* var editor = CKEDITOR.replace('editor', {
			"filebrowserUploadUrl" : "${pageContext.request.contextPath}/api/uploadfile/uploadCKImg?maxSize="+1*1024*1024,
			enterMode :CKEDITOR.ENTER_BR //换行直接加br
		}); */
		window.UEDITOR_HOME_URL = "<%=path%>" ;
	    var editor = UE.getEditor('editor');
	    $(function(){
	    	handleType=getQueryString("handleType"); 
	    	//如果是编辑或者复制
	    	if(handleType == "edit" || handleType == "copy"){
	    		id=getQueryString("id"); 
	    		copyId=id;
	    		getMaterialInfo();
	    	}
	    	$('.tishi img').mouseover(function(){
                $(this).parent().find('.alert').show();
            });
            $('.tishi img').mouseout(function(){
                $(this).parent().find('.alert').hide();
            });
	    	$(".i-checks").iCheck({checkboxClass:"icheckbox_square-green",radioClass:"iradio_square-green",});
	    	initDate();
	    	getMusicList();
	    })
	    
	    /* 初始化控件时间 */
	    function initDate(){
	    	var myDate = new Date();
	    	//获取当前年
	    	var year=myDate.getFullYear();
	    	//获取当前月
	    	var month=myDate.getMonth()+1;
	    	var lastMoth=myDate.getMonth()+2;
	    	//获取当前日
	    	var day=myDate.getDate(); 
	    	if(day<10)
	        	day="0"+day;
	    	if(month<10)
	    		month="0"+month;
	    	$("#startTime").val(year+"-"+month+"-"+day);
	        $('#startTime').datepicker({  
	            todayBtn : "linked",  
	            autoclose : true,  
	            todayHighlight : true, 
	            forceParse : true,
	            startDate : new Date()  
	        }).on('changeDate',function(e){  
	        });
	        if(lastMoth>12){
	        	year=year+1;
	        	lastMoth=lastMoth-12;
	        }
	        if(lastMoth<10)
	        	lastMoth="0"+lastMoth;
				$("#endTime").val(year+"-"+lastMoth+"-"+day);
				$('#endTime').datepicker({
					todayBtn : "linked",
					autoclose : true,
					todayHighlight : true,
					forceParse : true,
					startDate : new Date()
	        	}).on('changeDate',function(e){
	        });
	    }
	    /* 获取模板信息 */
	    function getMaterialInfo(){
	    	var url="<%=path%>/material/ajaxGetMaterialDetail";
	    	$.post(url, {
	            "id": id,
	        }, function (data) {
	            if (data.status == "200") {
	            	initMaterialInfoView(data.data);
	            	getPageInfo(id);
	            } else {
	            	errorDialog(data.message);
	            }
	        });
	    }
	    /* 初始化页面信息 */
	    function initMaterialInfoView(data){
	    	name = data.name;
	    	startTime = data.startTime;
	    	endTime = data.endTime;
	    	storeIds = data.storeIds; 
	    	showStoreCount = data.showStoreCount;
	    	wxAuthType = data.wxAuthType;
	    	backMusic = data.backMusic;
	    	isAlowShare = data.isAlowShare;
	    	validityType = data.validityType;
	    	status = data.status;
	    	if(handleType == "copy"){
	    		name = name + "副本";
	    	}
	    	$("#name").val(name);
	    	$("#showStoreCount").val(showStoreCount);
	    	//判断授权方式
	    	if(wxAuthType == 0){
	    		$('#explicitAuth').removeAttr("checked");
	    		$('#explicitAuth').parent().removeClass("checked");
	    		$('#implicitAuth').attr("checked","checked");
	    		$('#implicitAuth').parent().addClass("checked");
	    	}else {
	    		$('#implicitAuth').removeAttr("checked");
	    		$('#implicitAuth').parent().removeClass("checked");
	    		$('#explicitAuth').attr("checked","checked");
	    		$('#explicitAuth').parent().addClass("checked");
	    	}
	    	//判断是否允许分享
	    	if(isAlowShare == 0){
	    		$('#alowShare').removeAttr("checked");
	    		$('#alowShare').parent().removeClass("checked");
	    		$('#notAlowShare').attr("checked","checked");
	    		$('#notAlowShare').parent().addClass("checked");
	    	}else {
	    		$('#notAlowShare').removeAttr("checked");
	    		$('#notAlowShare').parent().removeClass("checked");
	    		$('#alowShare').attr("checked","checked");
	    		$('#alowShare').parent().addClass("checked");
	    	}
	    	//判断有效期
	    	if(validityType==1){
	    		$('#noValidity').removeAttr("checked");
	    		$('#noValidity').parent().removeClass("checked");
	    		$('#haveValidity').attr("checked","checked");
	    		$('#haveValidity').parent().addClass("checked");
	    		$('#startTime').val(formatDateTimeYMD(startTime));
	    		$('#endTime').val(formatDateTimeYMD(endTime));
	    	}else {
	    		$('#haveValidity').removeAttr("checked");
	    		$('#haveValidity').parent().removeClass("checked");
	    		$('#noValidity').attr("checked","checked");
	    		$('#noValidity').parent().addClass("checked");
	    	}
	    	if(StringEmpty(storeIds)){
	    		getStoreList(storeIds);
	    	}
	    	if(status !=0 && handleType != "copy"){
	    		$("#noValidity").attr("disabled","false");
	    		$("#haveValidity").attr("disabled","false");
	    		$("#startTime").attr("disabled","false");
	    		$("#endTime").attr("disabled","false");
	    	}
	    }
	    /* 获取门店列表 */
	    function getStoreList(storeIds){
	    	var url="<%=path%>/store/findListByDto";
	    	$.post(url, {
	            "ids": storeIds,
	        }, function (data) {
	            if (data.status == "200") {
	            	var storeList = data.data;
	            	var html='';
	    	    	for(var i in storeList){
	    	    		var id=storeList[i].id;
	    	    		var name=storeList[i].name;
	    	    		store_names.push(name);
	    	    		store_ids.push(id);
	    	    	    html += '<span id="storeLine'+id+'" class="label label-info" style="margin-right: 5px;">'+name+'<span class="deleteStore" storeName="'+name+'" storeId="'+id+'" style="cursor: pointer;"> ×</span></span>';
	    	    	} 
	    	    	$('#storeList').html(html);
	            } else {
	            	errorDialog(data.message);
	            }
	        });
	    }
	    /* 获取页数 */
	    function getPageInfo(){
	    	var url="<%=path%>/material/ajaxGetMaterialPhotoPageDetail";
	    	$.post(url, {
	            "materialId": id,
	        }, function (data) {
	            if (data.status == "200") {
	            	var html = "";
	            	var contentPageArray=data.data;
	            	pageIndex = contentPageArray.length;
	            	if(pageIndex == 9){
	            		$('#addPage').hide();
	            	}
	            	var index=1;
	            	for(var i in contentPageArray){
	            		html+='<div id="line'+index+'" class="s_btn-primary"><button type="button" class="btn pageInfoBtn" pageIndex="'+index+'" style="background-color:#1ab394">第'+numToString(index)+'页 </button><a id="delete'+index+'" pageIndex="'+index+'" class="showDelete" style="padding-right: 5px;"><span style="color:#ffffff">x</span></a></div>';
	            		contentArray.push(contentPageArray[i].content);
	            		index++;
	            	}
	            	$('#photoPage').html(html);
	            	$('.showDelete').hide();
	            	if(index-1>1){
	            		$('#delete'+parseInt(index-1)+'').show();
	            	}
	            	//editor.setData(contentArray[0]);
	            	setTimeout(function () {
	    				//设置自定义文本内容信息
	    				var cktext_info = data.content;
	    				//CKEDITOR.instances.editor.setData(cktext_info);
	    				editor.setContent(contentArray[0]);
	    			}, 1000);
	            } else {
	            	console.log("getPageInfo()--->"+data.message);
	            }
	        });
	    }
	    
	    /* 获取音乐列表 */
	    function getMusicList() {
	        var url = "${pageContext.request.contextPath}/activityMusic/ajaxGetActivityMusicPage";
	        $.post(url, {
	            "startIndex": startIndex,
	            "pageSize": pageSize,
	        }, function (data) {
	            if (data.status == "200") {
	                setMusicListHtml(data.data);
	            } else {
	            }
	        });
	    }

	    //设置音乐html
	    function setMusicListHtml(data) {
	        var html = '';
	        for (var i = 0; i < data.length; i++) {
	            var index = i + 1;
	            if (StringEmpty(backMusic) && backMusic == data[i].id) {
	                html += '<li><img indexNum="' + index + '" id="isradio_id' + index + '" music_name="' + data[i].name + '" musicId=' + data[i].id + ' src="<%=path%>/images/marketing/img_radio.png"';
	                $("#chosed_music").html('<h3 indexNum="' + index + '" id="h3_music" style="margin-top:0;">' + data[i].name + '<img class="mp4" src="<%=path%>/images/marketing/mp4.png"/><img class="cancle" indexNum="' + index + '" src="<%=path%>/images/marketing/close.png"/></h3>');
	            } else {
	                html += '<li><img indexNum="' + index + '" id="isradio_id' + index + '" music_name="' + data[i].name + '" musicId=' + data[i].id + ' src="<%=path%>/images/marketing/img_radio_n.png"';
	            }
	            html += 'class="isRadio">' + data[i].name + '<a id="' + data[i].id + '" href="javascript:void(0)"';
	            html += 'class="del"></a><a href="javascript:void(0)"';
	            html += 'mp3src="' + data[i].url + '"';
	            html += 'class="play_stop play"></a></li>';
	        }
	        $('.musicList').html(html);
	    }
	    
	    //保存
	    function save(){
	    	name = $("#name").val();
	    	storeIds = store_ids.join(","); 
	    	showStoreCount = $('#showStoreCount').val();
	    	if(!StringEmpty(showStoreCount)){
	    		showStoreCount = 1;
	    	}
	    	validityType= $("input[name='validity']:checked").val();
	    	wxAuthType = $("input[name='authType']:checked").val();
	    	isAlowShare = $("input[name='alowShare']:checked").val();
	    	if(!StringEmpty(name)){
	    		errorDialog("请输入H5名称！");
	    		isNext=false;
	    		return ;
	    	}
	    	if(contentArray.length == (pageIndex-1)){
	    		var content = editor.getContent();
	    		if(StringEmpty(content)){
	    			contentArray.push(content);
	    		}
	    	}
    		startTime = $('#startTime').val()+" 00:00:00";
    		endTime = $('#endTime').val()+" 23:59:59";
	    	// 保存当前page页的内容
	    	var currentContent=editor.getContent();
	    	if(StringEmpty(currentContent)){
	    		contentArray[switchIndex-1]=currentContent;
	    	}
	    	
	    	console.log("contentArray---------->"+contentArray);
	    	if(contentArray.length<1){
	    		errorDialog("请设置H5内容！");
	    		isNext=false;
	    		return ;
	    	}
	    	//判断是编辑还是创建
	    	if(!isCreate && (handleType == "create" || handleType == "copy")){
	    		ajaxCreateMaterial();
	    	}else{
	    		if(handleType == "edit" && status != 0 && status != 1){
	    			status = 4; // 把状态置为未发布状态
	    		}
	    		ajaxEditMaterial();
	    	}
	    }
	    /* 创建素材 */
	    function ajaxCreateMaterial(){
	    	var url = "<%=path%>/material/ajaxCreateMaterial";
	        $.post(url, {
	        	"previewId":previewId,
	            "name": name,
	            "storeIds": storeIds,
	            "showStoreCount": showStoreCount,
	            "wxAuthType": wxAuthType,
	            "isAlowShare": isAlowShare,
	            "startTime": new Date(startTime),
	            "endTime": new Date(endTime),
	            "backMusic":backMusic,
	            "materialType":2,
	            "status":0,
	            "validityType":validityType,
	        }, function (data) {
	        	if (data.status == "200") {
            		isCreate=true;
            		id=data.data;
            		ajaxCreateMaterialPhotoPage();
	            } else {
	            	errorDialog(data.message);
	            }
	        });
	    }
	    /* 编辑素材 */
	    function ajaxEditMaterial(){
	    	var url = "<%=path%>/material/ajaxUpdateMaterial";
	        $.post(url, {
	        	"previewId":previewId,
	        	"id":id,
	            "name": name,
	            "storeIds": storeIds,
	            "showStoreCount": showStoreCount,
	            "wxAuthType": wxAuthType,
	            "isAlowShare": isAlowShare,
	            "startTime": new Date(startTime),
	            "endTime": new Date(endTime),
	            "validityType":validityType,
	            "backMusic":backMusic,
	            "status" : status,
	        }, function (data) {
	        	if (data.status == "200") {
	        		ajaxCreateMaterialPhotoPage();
	            } else {
	            	errorDialog(data.message);
	            }
	        });
	    }
	    
	    // 保存page页
	    function ajaxCreateMaterialPhotoPage(){
	    	console.log("photoPageDeatil------>"+contentArray.join("|_c|e|c|o|o|k_|"))
	    	var url = "<%=path%>/material/ajaxCreateMaterialPhotoPageDetail";
	        $.post(url, {
	        	"materialId":id,
	            "photoPageDeatil": contentArray.join("_c_e_c_o_o_k_"),
	        }, function (data) {
	        	if (data.status == "200") {
	            	if(isNext){
	            		window.location.href="<%=path%>/material/materialCollectInfo?materialType=2&handleType="+handleType+"&id="+id+"&copyId="+copyId+"&previewId="+previewId;;
	            	}else{
	            		
		           		SuccessDialogByUrl("保存成功!","",url);
		           		var url ='<%=path%>/material/materialList';
		           		setTimeout(function () { window.location.href=url; }, 1600);
	            	}
	            } else {
	            	errorDialog(data.message);
	            }
	        });
	    }
	    
	    //上传音乐
	    var flag=false;
	    function uploadMusic() {
	        $("#uploadMusic").submit(function () {
	            if (flag) {
	                return;
	            }
	            flag = true;
	            $("#uploadMusic").ajaxSubmit({
	                type: "post",
	                url: "${pageContext.request.contextPath}/api/uploadfile/file",
	                data: {"typename": "musicFile","fileType":"audio/mpeg","maxSize":3*1024*1024},
	                success: function (data) {
	                	if(data.status == "200"){
	                		saveMusicRecord(data);
	                	}else if(data.status == "201"){
	                		errorDialog("上传附件不能超过3M!");
	                	}
	                },
	                error: function (msg) {
	                    errorDialog("文件上传失败", "");
	                }
	            });
	            return false;
	        });
	        if (flag) {
	            flag = false;
	        }
	        $("#uploadMusic").submit();
	    }
	    
	    //保存音乐记录
	    function saveMusicRecord(data){
	    	 var url = "<%=path%>/activityMusic/ajaxSaveMusicInfo";
	         $.post(url, {
	             "name": data.saveFilename,
	             "url": data.realSavePath,
	         }, function (data) {
	             if (data.status == "200") {
	            	 successDialog("上传成功！");
	            	 getMusicList();;
	             } else {

	             }
	         });
	    }
	    /* 预览 */
	    function previewMaterial(){
	    	if(contentArray.length == (pageIndex-1)){
	    		var content = editor.getContent();
	    		if(StringEmpty(content)){
	    			contentArray.push(content);
	    		}
	    	}
	    	if(validityType==1){
	    		startTime = $('#startTime').val()+" 00:00:00";
	    		endTime = $('#endTime').val()+" 23:59:59";
	    	}else{
	    		startTime = $('#startTime').val()+" 00:00:00";
	    		endTime = $('#endTime').val()+" 23:59:59";
	    	}
	    	// 保存当前page页的内容
	    	var currentContent=editor.getContent();
	    	if(StringEmpty(currentContent)){
	    		contentArray[switchIndex-1]=currentContent;
	    	}
	    	var url = "<%=path%>/material/ajaxSaveMaterialPreviewInfo";
	        $.post(url, {
	        	"id":id,
	        	"previewId":previewId,
	            "name": name,
	            "content":content,
	            "storeIds": storeIds,
	            "showStoreCount": showStoreCount,
	            "wxAuthType": wxAuthType,
	            "isAlowShare": isAlowShare,
	            "startTime": new Date(startTime),
	            "endTime": new Date(endTime),
	            "validityType":validityType,
	            "backMusic":backMusic,
	            "pageInfo":contentArray.join(","),
	        }, function (data) {
	        	if(data.status == "200"){
	        		var path = window.parent.servicePath;
	        		var url = path+"/material/photoAlbumMaterialPreview?id="+previewId;
	        		showPreviewDialog(url);
	        		/* $('#qrcode').html("");
	        		jQuery('#qrcode').qrcode(path+"/material/photoAlbumMaterialPreview?id="+previewId);
               	    $('#shareModal').modal('show'); */
	        	}else{
	        		errorDialog("预览失败");
	        	}
	        });
	    }
	    
	    function showPreviewDialog(url){
			 var d = dialog({
					width: 140,
		 	        height:140,
		 	        align: 'top',
		 			content:"<div id='code'></div> <img src='' id='qrcodeImg' style='width:140px;height:140px;'/>"+
		 	        "<a id='download' download='qrcode.jpg'></a>"
		 	        ,
					quickClose: true// 点击空白处快速关闭
			 });
			 d.show(document.getElementById('preview'));
			 var qrcode = $('#code').qrcode({
				   width: 110,
				   height:110,
		           text:url+""/*可以通过ajax请求动态设置*/
		    	 }).attr("style","display:none;");
		     	//将生成的二维码转换成图片格式
			  var canvas = qrcode.find('canvas').get(0);
			  $('#qrcodeImg').attr('src', canvas.toDataURL('image/jpg'));
			  $(".ui-dialog").css("background-color" , "rgba(7, 17, 27, 0.3)"); 
		}
	</script>    
	
	
	<!-- 按钮点击相关 -->
	<script type="text/javascript">
	 /* 下一页 */
	 $('#next').click(function () {
		isNext=true;
		save();
	 });
	/* 增加相册页数 */
	 $('#addPage').on('click',function(event){
    	//保存当前文本编辑器内容
		var editorContent=editor.getContent();

		 if(!StringEmpty(editorContent)){
			 errorDialog("请填写内容！");
			 return ;
         }
         if((switchIndex<=contentArray.length) && (pageIndex>contentArray.length)){
    		errorDialog("请填写内容！");
    		return ;
    	}
    	console.log("contentArray.length----->"+contentArray.length);
    	console.log("pageIndex---->"+pageIndex);
    	if(contentArray.length == (pageIndex-1)){
    		contentArray.push(editorContent);
    	}
		//清空文本编辑器内容
		editor.setContent('');
		//增加页数
		pageIndex++;
		$('.showDelete').hide();
		$('#photoPage').append('<div id="line'+pageIndex+'" class="s_btn-primary"><button type="button" class="btn pageInfoBtn" pageIndex="'+pageIndex+'" style="background-color:#1ab394">第'+numToString(pageIndex)+'页 </button><a id="delete'+pageIndex+'" pageIndex="'+pageIndex+'" class="showDelete" style="padding-right: 5px;"><span style="color:#ffffff">x</span></a></div>');
		if(pageIndex == 9){
    		$('#addPage').hide();
    	}
		switchIndex = pageIndex;
	 });
	 /* 删除页数 */
	 $(document).on("click", ".showDelete", function () {
		 swal({
			  title: "删除确认",
			  text: "您确定要删除此页吗?删除后，将无法恢复！",
			  type: 'warning',
			  showCancelButton: true,
			  confirmButtonColor: '#1ab394',
			  cancelButtonColor: '#E8E8E8',
			  confirmButtonText: '确认',
			  cancelButtonText:'取消',
			  reverseButtons : true
			}).then(function () {
				var index=$(this).attr("pageIndex");
		        var id = "#line" + index;
		        $(id).remove();
			    if(contentArray.length == index){
					 contentArray.pop();
				}
		        var arrayIndex = index-2;
		        editor.setContent(contentArray[arrayIndex]);
		        pageIndex--;
		        if(pageIndex < 9){
		    		$('#addPage').show();
		    	}
		        if(pageIndex > 1){
		        	var showId = "#delete" + (index-1);
		        	$(showId).show();
		        }
		        switchIndex = index - 1;
			})
	 });
	 
	 //切换页签
	 $(document).on("click", ".pageInfoBtn", function () {
		 //切换页签保存当前页签内容
		var currentContent=editor.getContent();
        var index=$(this).attr("pageIndex");
        var arrayIndex = index-1;
        if(StringEmpty(currentContent)){
        	contentArray[switchIndex-1]=currentContent;
        }
        switchIndex = index;
         if (switchIndex > contentArray.length){
             editor.setContent("");
         } else{
             editor.setContent(contentArray[arrayIndex]);
         }
	 });
	
	function numToString(pageIndex){
		var result="";
		switch (pageIndex) {
		case 1:
			result="一";
			break;
		case 2:
			result="二";	
			break;
		case 3:
			result="三";
			break;
		case 4:
			result="四";
			break;
		case 5:
			result="五";
			break;
		case 6:
			result="六";
			break;
		case 7:
			result="七";
			break;
		case 8:
			result="八";
			break;
		case 9:
			result="九";
	        break;
		default:
			break;
		}
		return result;
	}
	
	
	
	$(document)
    .on(
        "click",
        ".play_stop",
        function () {
            if ($.inArray("play", $(this).attr("class").split(
                    " ")) > 0) {
                $(this).removeClass("play").addClass("stop")
                    .parent().siblings().find(".play_stop")
                    .removeClass("stop").addClass("play");
                var src = $(this).attr("mp3src");
                playMP3(src);
            } else {
                $(this).removeClass("stop").addClass("play");
                stopMP3();
            }
    });
	//选择音乐文件
    $(document).on("click", ".isRadio", function () {
        $(this).attr("src", "<%=path%>/images/marketing/img_radio.png")
            .parent().siblings().find(".isRadio").attr("src", "<%=path%>/images/marketing/img_radio_n.png");
        //音乐文件id
        backMusic = $(this).attr("musicId");
    });
	
	 //删除音乐
    $(document).on("click", ".del", function () {
        var musicId=this.id;
        deleteMusic(musicId);
    });
    function deleteMusic(musicId){
		swal({
			  title: '您确定要删除此音乐吗?',
			  text: "删除后将无法恢复，请谨慎操作！",
			  type: 'warning',
			  showCancelButton: true,
			  confirmButtonColor: '#d33',
			  cancelButtonColor: '#3085d6',
			  confirmButtonText: '删除',
			  cancelButtonText:'取消'
			}).then(function () {
				var url = "<%=path%>/activityMusic/ajaxDeleteMusic";
		        $.post(url, {
		            "id": musicId,
		        }, function (data) {
		            if (data.status == "200") {
		                successDialog("删除成功"); 
		                $("#" + musicId).parent().remove();
		            } else {
		                errorDialog("删除失败");
		            }
		        });
			})
	} 
	/* 播放音乐 */ 
	function playMP3(src) {
        var mp3 = document.getElementById("mp3");
        if (mp3.src.indexOf(src) > 0 || mp3.src.indexOf(encodeURI(src)) > 0) {

        } else {
            mp3.src = src;
            mp3.load();
        }
        mp3.play();
    }
    /* 暂停播放 */
    function stopMP3() {
        var mp3 = document.getElementById("mp3");
        mp3.pause();
    }
	</script>
	
	<script type="text/javascript">
		function colseModal(){
	    	$('#storeModal').modal('hide');
	    }
	    
	    function determineStore(){
	    	var html='';
	    	for(var i in store_names){
	    	    html += '<span id="storeLine'+store_ids[i]+'" class="label label-info" style="margin-right: 5px;">'+store_names[i]+'<span class="deleteStore" storeName="'+store_names[i]+'" storeId="'+store_ids[i]+'" style="cursor: pointer;"> ×</span></span>';
	    	} 
	    	$('#storeList').html(html);
	    	$('#storeModal').modal('hide');
	    }
	    
	    $(document).on('click','#bm_cstore img',function(){
		  	var src = $(this).attr("src");
			mdstore="";
		    if(src=="<%=path%>/images/marketing/s_check_no.png"){
		    	$(this).attr("src","<%=path%>/images/marketing/s_check.png");
		        name = $(this).attr("cname");
		        store_names.push(name);
		        store_ids.push(this.id);
		    }else{
		    	$(this).attr("src","<%=path%>/images/marketing/s_check_no.png");
		    	name = $(this).attr("cname")+"";
		    	store_names.splice(contains(store_names,name), 1);
		    	store_ids.splice(contains(this.id,store_ids), 1);
		    }
		    
		});
	    
	  //打叉移除选择的门店
        $(document).on('click','.deleteStore',function(){
        	var storeId=$(this).attr("storeId");
        	var storeName=$(this).attr("storeName");
        	var lineId="#storeLine"+storeId;
        	$(lineId).remove();
        	store_ids.splice(contains(store_ids,storeId), 1);
        	store_names.splice(contains(store_names,storeName), 1);
        }); 
        $("#storeModal").on("hidden.bs.modal", function() {
		      $(this).removeData("bs.modal");
		      $('#storeModal .modal-content').empty();
		});
	</script>
</body>
</html>
